---
title: Magic Card
date: 2024-07-07
description: A spotlight effect that follows your mouse cursor and highlights borders on hover.
author: dillionverma
published: true
---

<ComponentPreview name="magic-card-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/magic-card
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="magic-card" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { MagicCard } from "@/registry/magicui/magic-card"
```

```tsx showLineNumbers
<MagicCard>
  <div className="p-4">
    <p>Hello World</p>
    <span>Hover me</span>
  </div>
</MagicCard>
```

## Props

### MagicCard

| Prop name         | Type              | Default   | Description                                 |
| ----------------- | ----------------- | --------- | ------------------------------------------- |
| `children`        | `React.ReactNode` | `-`       | The content to be rendered inside the card  |
| `className`       | `string`          | `-`       | Additional CSS classes to apply to the card |
| `gradientSize`    | `number`          | `200`     | Size of the gradient effect                 |
| `gradientColor`   | `string`          | `#262626` | Color of the gradient effect                |
| `gradientOpacity` | `number`          | `0.8`     | Opacity of the gradient effect              |
| `gradientFrom`    | `string`          | `#9E7AFF` | Start color of the gradient border          |
| `gradientTo`      | `string`          | `#FE8BBB` | End color of the gradient border            |
